import React from 'react'
import { Button, Checkbox, Form, Input, Card, Space, Table, Tag } from 'antd'

import type { ColumnsType } from 'antd/es/table'
import { SearchOutlined } from '@ant-design/icons'

//table中渲染的数据对象的类型
interface DataType {
  key: string
  name: string
  age: number
  address: string
  tags: string[]
}

const columns: ColumnsType<DataType> = [
  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name',
    render: (text) => <a>{text}</a>,
  },
  {
    title: 'Age',
    dataIndex: 'age',
    key: 'age',
  },
  {
    title: 'Address',
    dataIndex: 'address',
    key: 'address',
  },
  {
    title: 'Tags',
    key: 'tags',
    dataIndex: 'tags',
    render: (_, { tags }) => (
      <>
        {tags.map((tag) => {
          let color = tag.length > 5 ? 'geekblue' : 'green'
          if (tag === 'loser') {
            color = 'volcano'
          }
          return (
            <Tag color={color} key={tag}>
              {tag.toUpperCase()}
            </Tag>
          )
        })}
      </>
    ),
  },
  {
    title: 'Action',
    key: 'action',
    render: (_, record) => (
      <Space size="middle">
        <a>Invite {record.name}</a>
        <a>Delete</a>
      </Space>
    ),
  },
]

const data: DataType[] = [
  {
    key: '1',
    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park',
    tags: ['nice', 'developer'],
  },
  {
    key: '2',
    name: 'Jim Green',
    age: 42,
    address: 'London No. 1 Lake Park',
    tags: ['loser'],
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park',
    tags: ['cool', 'teacher'],
  },
]

export default function HospitalSet() {
  const onFinish = (values: any) => {
    console.log('Success:', values)
  }

  const onFinishFailed = (errorInfo: any) => {
    console.log('Failed:', errorInfo)
  }
  return (
    <Card>
      <Form
        //  让表单中的表单元素在一行排列
        layout="inline"
        name="basic" //当前form表单的名字
        // antd中也有栅格系统,一行是24份
        // 表单中描述文本这一列在一行中占8份
        // labelCol={{ span: 8 }}
        // 表单这一列占16份
        // wrapperCol={{ span: 16 }}
        // 初始数据
        // initialValues={{ remember: false, username: '嘿嘿嘿' }}
        // 点击提交按钮,如果表单校验成功,则onFinish触发
        onFinish={onFinish}
        // 点击提交按钮,如果表单校验失败,则onFinishFailed触发
        onFinishFailed={onFinishFailed}
        // autoComplete="off"
      >
        <Form.Item
          // 用于给当前表单元素,添加描述文本
          // label="Username"
          name="hosname"
          // 校验规则
          // required: true这个表单项必填
          // message 就是表单校验不通过的提示信息
          rules={[{ required: true, message: 'Please input your username!' }]}
        >
          <Input placeholder="医院名称" />
        </Form.Item>

        <Form.Item
          // label="Password"
          name="hoscode"
          rules={[{ required: true, message: 'Please input your password!' }]}
        >
          <Input placeholder="医院编码" />
        </Form.Item>

        {/* <Form.Item
          name="remember"
          valuePropName="checked" //控制值的属性名叫checked
          // offset是表单元素左侧偏移8份的位置
          wrapperCol={{ offset: 8, span: 16 }}
        >
          <Checkbox>Remember me</Checkbox>
        </Form.Item> */}

        <Form.Item>
          {/* Button有htmlType="submit"则表示这个按钮是当前表单的提交按钮 */}
          <Button
            type="primary"
            htmlType="submit"
            style={{ marginRight: 10 }}
            icon={<SearchOutlined />}
          >
            查询
          </Button>
          <Button type="default">清空</Button>
        </Form.Item>
      </Form>
      <div style={{ marginTop: 20, marginBottom: 20 }}>
        <Button type="primary" style={{ marginRight: 10 }}>
          添加
        </Button>
        <Button type="primary" danger disabled>
          批量删除
        </Button>
      </div>
      {/* colums决定了表格中有多少列, dataSource决定了渲染什么数据 */}
      <Table columns={columns} dataSource={data} />
    </Card>
  )
}
